<template lang="pug">
dialogModel(
    ref="dialogLoad"
    title="修改密码"
    width="480"
    @confirm="confirm()"
)
    .cont-wrap
        formModel(
            :form="form"
            ref="formModelRef"
            :flex="false"
            @handleChange="handleChange"
        )
        .pop 新密码至少包含大写字母、小写字母、数字、特殊字符任意3种，8-20位！
</template>

<script setup>


import dialogModel from '@/components/dialogModel.vue'
import formModel from '@/components/formModel.vue'
import { ref, onMounted } from 'vue'
import apis from '@/apis'
import { success, warning } from '@/utils/message'
import { storageGet } from '@/utils'

let userInfo = {}
onMounted(() => {
    userInfo = storageGet('userInfo') || {}
    formInit()
})
//表单变化
const handleChange = (val) =>{
    result = val
}
// 密码校验
const passwordCheck = (rule, value, callback) =>{
    if(!result.password1 || !result.password){
        callback()
    }else if(result.password1 != result.password){
        callback(new Error('新密码不一致'))
    }else if(result.password1 == result.oldpsw){
        callback(new Error('新密码不能与原密码相同'))
    }else{
        callback()
    }
}
const form = ref([])
const formInit = () => {
    form.value = [
        { type: 'input', label: '账号', maxlength: 50, prop: 'userName', defaultValue: userInfo.userName, readonly: true },
        { type: 'password', label: '原密码', maxlength: 50, prop: 'oldpsw', rules: { required: true } },
        { type: 'password', label: '新密码', maxlength: 50, prop: 'password', rules: [{ required: true }, { validator: passwordCheck, trigger: 'change' }] },
        { type: 'password', label: '确认新密码', maxlength: 50, prop: 'password1', rules: [{ required: true }, { validator: passwordCheck, trigger: 'change' }] }
    ]
}
const dialogLoad = ref(null)
const open = () =>{
    dialogLoad.value.open()
}
let result = {}
const formModelRef = ref(null)
const confirm = () => {
    formModelRef.value.validate((type, data) => {
        if (type){
            result = data
            updatePassWord()
        }
    })
}
const updatePassWord = () => {//保存
    apis.updatePassWord({
        oldPassword: result.oldpsw,
        password: result.password
    }).then((res) => {
        if(res.status == 1){
            success(res.msg)
            dialogLoad.value.close()
        }
    })

}
defineExpose({
    open
})
</script>

<style lang="less" scoped>
@import '@/assets/theme.less';
:deep(.el-menu-item){
    line-height: 40px;
}
.cont-wrap{
    margin-top:20px;
    min-height: 260px;
    border-bottom: 1px solid #ccc;
}
.label{
    line-height: 30px;
    text-align: right;
}
:deep(.el-row){
    margin-bottom: 20px;
}
.pop{
    font-size: 12px;
    color: #999;
}
</style>